<script setup lang="ts">
import { download, get, loadFile, message, post, checkBtnPermission } from '@/utils'
import Modal from './components/Modal.vue'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import RechargeModal from './components/RechargeModal.vue'
import { BtnPermission } from '@/enum/permission'
import useValueEnum from '@/hooks/useValueEnum'
import MoneyList from './components/MoneyList.vue'
const { store } = useModal()
const { store: rechargeStore } = useModal()
const { store: moneyStore } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/seller/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const changPush = async (val, key, item) => {
  if (!checkBtnPermission(BtnPermission.编辑)) return false
  try {
    const { code, msg } = await post({ url: '/server-shop/admin/seller/update/is', data: { id: item.id, [key]: val ? 1 : 0 } })
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
    return code == 200
  } catch (error) {
    return false
  }
}
const changeStatus = async (val, item) => {
  if (!checkBtnPermission(BtnPermission.编辑)) return false
  try {
    const url = val ? '/server-shop/admin/seller/freeze/remove' : '/server-shop/admin/seller/freeze'
    const { code, msg } = await post({ url, data: { id: item.id } })
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
    return code == 200
  } catch (error) {
    return false
  }
}
const { valueEnum: seller } = useValueEnum('/server-shop/admin/seller/category/list')
const columns = formatColumns([
  {
    title: 'ID',
    dataIndex: 'id',
    width: 200,
  },
  {
    title: '门店名称',
    dataIndex: 'name',
    width: 200,
    hideInSearch: false,
  },
  {
    title: '商户姓名',
    dataIndex: 'legalPerson',
    width: 200,
  },
  {
    title: '联系电话',
    dataIndex: 'mobile',
    width: 200,
  },
  { title: '商户分类', dataIndex: 'categoryId', width: 200, valueEnum: seller, hideInSearch: false },
  {
    title: '余额',
    dataIndex: 'money',
    width: 150,
  },
  {
    title: '是否推荐',
    dataIndex: 'isPush',
    width: 200,
    hideInSearch: false,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  {
    title: '是否开启自提',
    dataIndex: 'isOpenPick',
    width: 200,
    hideInSearch: false,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  {
    title: '是否显示',
    dataIndex: 'isShow',
    width: 200,
    hideInSearch: false,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  {
    title: '是否审核商品',
    dataIndex: 'isAuditGoods',
    width: 200,
    hideInSearch: false,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  {
    title: '是否自营',
    dataIndex: 'isSelf',
    width: 200,
    hideInSearch: false,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 150,
    hideInSearch: false,
    valueEnum: {
      1: { text: '开启' },
      0: { text: '关闭' },
    },
  },
  {
    title: '操作',
    dataIndex: 'options',
    width: 150,
    fixed: 'right',
    btnList: [
      {
        name: '查看',
        permission: BtnPermission.查看,
        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '编辑',
        permission: BtnPermission.编辑,
        handle: ({ record }) => store.handleShow(record, true),
      },
      // {
      //   name: '充值',
      //   permission: BtnPermission.编辑,
      //   handle: ({ record }) => rechargeStore.handleShow(record, true),
      // },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :scroll="{ x: 1000 }" :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
        <a-button type="primary" @click="store.handleShow({}, true)" v-permission="[BtnPermission.新建]">
          <template #icon>
            <icon-plus />
          </template>
          新建</a-button
        >
      </template>
      <template #money="{ record }">
        <a-button type="text" @click="moneyStore.handleShow(record)">{{ record.money }}</a-button>
      </template>
      <template #isPush="{ record }">
        <a-switch :default-checked="record.isPush == 1" :before-change="val => changPush(val, 'isPush', record)">
          <template #checked> 是 </template>
          <template #unchecked> 否 </template>
        </a-switch>
      </template>
      <template #isAuditGoods="{ record }">
        <a-switch :default-checked="record.isAuditGoods == 1" :before-change="val => changPush(val, 'isAuditGoods', record)">
          <template #checked> 是 </template>
          <template #unchecked> 否 </template>
        </a-switch>
      </template>
      <template #isSelf="{ record }">
        <a-switch :default-checked="record.isSelf == 1" :before-change="val => changPush(val, 'isSelf', record)">
          <template #checked> 是 </template>
          <template #unchecked> 否 </template>
        </a-switch>
      </template>
      <template #isShow="{ record }">
        <a-switch :default-checked="record.isShow == 1" :before-change="val => changPush(val, 'isShow', record)">
          <template #checked> 是 </template>
          <template #unchecked> 否 </template>
        </a-switch>
      </template>
      <!-- <template #isOpenPick="{ record }">
        <a-switch :default-checked="record.isOpenPick == 1" :before-change="val => changPush(val, 'isOpenPick', record)">
          <template #checked> 是 </template>
          <template #unchecked> 否 </template>
        </a-switch>
      </template> -->

      <template #status="{ record }">
        <a-switch :default-checked="record.status == 1" :before-change="val => changeStatus(val, record)">
          <template #checked> 开启 </template>
          <template #unchecked>关闭 </template>
        </a-switch>
      </template>
    </ProTable>
    <MoneyList v-if="moneyStore.show" v-model:show="moneyStore.show" :id="moneyStore.id" :edit="moneyStore.edit" @confirm="actionRef.reload" />

    <RechargeModal v-if="rechargeStore.show" v-model:show="rechargeStore.show" :id="rechargeStore.id" :edit="rechargeStore.edit" @confirm="actionRef.reload" />
    <Modal v-if="store.show" v-model:show="store.show" :id="store.id" :edit="store.edit" @confirm="actionRef.reload" />
  </div>
</template>
